<template>
  <view class="px-2 box-border">
    <view class="mt-2.5">
      <personalModule
        :height="208"
        :leftWidth="165"
        showGapLine
        :contentStyle="{ padding: '24rpx 16rpx', 'align-items': 'center' }"
      >
        <template #left>
          <view
            class="flex flex-col justify-between items-center text-center w-[100%] h-[100%]"
          >
            <up-avatar
              :src="userInfo.avatar"
              shape="circle"
              size="125rpx"
              mode="scaleToFit"
            ></up-avatar>
            <text class="text-[25rpx] color-black">{{
              userInfo.communityId === 0 ? "朝阳派出所" : userInfo.communityName
            }}</text>
          </view>
        </template>
        <template #right>
          <view
            class="right flex flex-col justify-around ml-2 text-[28rpx] color-black h-[100%]"
            style="width: calc(100% - 165rpx - 16rpx)"
          >
            <view class="flex flex-row items-center">
              <text class="font-bold">{{ userInfo.userName }}</text>
              <text class="mx-4">{{ userInfo.badgeNumber }}</text>
            </view>
            <text>{{ userInfo.phonenumber }}</text>
          </view>
        </template>
      </personalModule>
    </view>
    <button
      class="rounded-2 bg-white color-[#038AFE] border-[#038AFE] h-[83rpx] leading-[83rpx] text-[33rpx] absolute bottom-[56rpx]"
      style="border: 1px solid #038afe; width: calc(100% - 32rpx)"
      @click="showModal = true"
    >
      退出登录
    </button>
    <up-modal
      :show="showModal"
      title="确定退出登录？"
      content="退出后部分功能将无法正常使用"
      contentTextAlign="center"
    >
      <template #confirmButton>
        <view class="flex flex-row justify-between item-center">
          <view class="w-[35%]">
            <up-button
              type="info"
              hairline
              text="取消"
              @click="showModal = false"
            ></up-button>
          </view>
          <view class="w-[35%]">
            <up-button
              type="primary"
              hairline
              text="确定退出"
              @click="userInfoStore.logout"
            ></up-button>
          </view>
        </view>
      </template>
    </up-modal>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import norAvatar from "@/static/icon/avatar.png";
import { policeUserInfo } from "@/api/user";
import { imgPrefix } from "@/config/app";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const uToastRef = <any>ref(null);
const userInfo = <any>ref({});
const showModal = ref(false);
// 获取个人信息
const getUserInfo = () => {
  policeUserInfo({ policeUserId: userInfoStore.userInfo.userId })
    .then((res) => {
      const { data } = res;
      data.avatar = imgPrefix + data.avatar;
      userInfo.value = data;
    })
    .catch((err) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

onLoad(() => {
  getUserInfo();
});
</script>

<style lang="scss" scoped></style>
